import { Device } from "@/api/interface/iot";
import { serviceAuthFind, serviceLicenseGet } from "@/api/modules/system/license";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { licenseStatusType } from "@/enums/dictEnum";
import "./index.scss";
import DialogBox from "@/components/DialogBox";
import JsonEditerVue from "@/components/JsonForm/JsonEditer.vue";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const initParam = reactive<Device.ReqProduct>({ pageIndex: 1, pageSize: 20 });
		const proTable = ref<any>();

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return serviceAuthFind(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const infoDialog = reactive<any>({
			title: proxy?.$t("record.dialog_title.info"),
			detail: {},
			visible: false
		});
		const clickBtn = async (fn: string, row: any) => {
			console.log(row);
			switch (fn) {
				case "authorizationInfo":
					const res = await serviceLicenseGet({});
					if (res.code == 200) {
						infoDialog.detail = JSON.stringify(res.result);
					}
					infoDialog.visible = true;
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "appName", label: proxy?.$t("record.tablist_label.app") },
			{ prop: "appKey", label: proxy?.$t("record.tablist_label.appkey"), search: { el: "input" } },
			{ prop: "authorityItemName", label: proxy?.$t("record.tablist_label.itemname"), width: 120 },
			{ prop: "authKey", label: proxy?.$t("record.tablist_label.authkey"), width: 120, search: { el: "input" } },
			{ prop: "status", label: proxy?.$t("record.tablist_label.status"), width: 120 },
			{ prop: "authorityItemValue", label: proxy?.$t("record.tablist_label.itemvalue"), width: 160 },
			{ prop: "updateTime", label: proxy?.$t("record.tablist_label.update_time"), width: 260 }
			// { prop: "operation", label: "操作" }
		];

		return () => {
			return (
				<div class="serviceAuth-page">
					<DialogBox hideFooter v-model:visible={infoDialog.visible} width="900" title={infoDialog.title}>
						<JsonEditerVue v-model:data={infoDialog.detail} class="flex-1" style="height:600px;width:100%" />
					</DialogBox>
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : proxy?.$t("record.tab_title.record")}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						searchCol={4}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return btnList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							authorityItemName: (scope: any) => {
								return scope.row.authorityItem.name || "--";
							},
							authorityItemValue: (scope: any) => {
								return scope.row.authorityItem.value || "--";
							},
							status: (scope: any) => {
								let licenseStatus = licenseStatusType.filter((item: any) => item.value == scope.row.status);
								return <el-tag type={licenseStatus[0].type}>{licenseStatus[0].label}</el-tag>;
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
